<template>
  <a-modal :open="open" width="760px" title="批量调价" :ok-button-props="{ disabled: !isCompleted }" centered ok-text="保存" @ok="onOk" @cancel="onCancel">
    <div class="w-full h-18 patient-info-header py-4 px-3 flex items-center mb-4 justify-between">
      <div class="w-full flex items-center justify-between mr-10 px-4">
        <LabelValue label="项目" :width="150" label-class="text-white font-bold" value-class="text-white" :value="rowData.mc" />
        <LabelValue label="商品分类" :width="150" label-class="text-white font-bold" value-class="text-white" :value="rowData.categroyName" />
        <LabelValue label="条形码" :width="150" label-class="text-white font-bold" value-class="text-white" :value="rowData.barCode" />
      </div>
    </div>
    <a-form :model="formState" class="form-style-flex">
      <a-form-item label="原单价" class="w-full"> {{ formatAmount(rowData.dj, 3) }} </a-form-item>
      <a-form-item label="现单价" class="w-full" v-bind="validateInfos.price">
        <a-input v-model:value="formState.price" v-input:float.3 placeholder="请输入" class="w-40" />
      </a-form-item>
      <a-form-item label="备注" class="w-full">
        <a-textarea v-model:value="formState.mome" :rows="3" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({
  price: '',
  mome: ''
})
const rulesState = ref({
  price: [{ required: true, message: '请输入现单价' }]
})
const { resetFields, validateInfos, isCompleted } = useForm(formState, rulesState)
const onCancel = () => {
  emit('update:open', false)
  resetFields()
}

const onOk = async () => {
  const { code, msg } = await post('/operation/opex/doUpdateOoProductPrice', {
    ...formState.value,
    id: props.rowData.id
  })
  if (code === 0) {
    message.success('保存成功')
    onCancel()
    emit('ok')
  } else {
    message.error(msg || '保存失败')
  }
}
</script>
<style lang="less" scoped>
.right-border-pro {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}
.patient-info-header {
  background-color: var(--primary-color);
  border-radius: 3px;
}
</style>
